<template>
  <div :class="{ 'mobile-body': isMobile }" :is-mobile="isMobile" class="lauout-container">
    <!-- 顶部样式组件 -->
    <topBar :isLogin="isLogin" @loginOut="loginOut" @openLogin="openLogin"></topBar>

    <!-- 广告图片 两张图 pc一张 移动一张 -->
    <div class="page-container">
      <div class="hx-banner">
        <img v-if="isMobile" src="@/assets/images/banner-mb.jpg" class="banner-img" alt="">
        <img v-else src="@/assets/images/banner-pc.jpg" class="banner-img" alt="">
      </div>
      <!-- 主要内容部分 -->
      <div class="main-container">
        <!-- 游戏名称与logo -->
        <div class="game-info-wrap">
          <div class="game-info">
            <!-- 游戏logo  -->
            <img class="avatar" src="@/assets/images/game-icon.png" alt="">
            <div class="right">
              <!-- 游戏名称  -->
              <p class="name">经典服务器</p>
              <!-- 游戏简单描述 -->
              <p class="info">轻松养成，放置升级</p>
            </div>
          </div>
        </div>
        <!-- 游戏角色部分 -->

        <div class="role-info-wrap" v-if="isLogin">
          <div class="role">
            <p class="name">{{ userInfo.name }}</p>
            <p class="aid">AID：{{ userInfo.aid }}</p>
            <p class="sid">区服：{{ userInfo.sid }}</p>
            <svg width="20" height="26" xmlns="http://www.w3.org/2000/svg" class="icon">
              <g fill="none" fill-rule="evenodd">
                <path
                  d="M10 6h10v10c0 5.523-4.477 10-10 10H0V16C0 10.477 4.477 6 10 6ZM18 0h2v6h-2zM18 0v6h-6a6 6 0 0 0 6-6Z"
                  fill="#D32F2F"></path>
                <path
                  d="m14.71 13.71-5 5a1 1 0 0 1-1.42 0l-2-2a1.004 1.004 0 0 1 1.42-1.42L9 16.59l4.29-4.3a1.004 1.004 0 1 1 1.42 1.42Z"
                  fill="#FFF" fill-rule="nonzero"></path>
              </g>
            </svg>
          </div>
        </div>
        <!-- 未登录样式 -->
        <div class="empty-login" v-else>
          <p>请先登录游戏账号</p>
          <div class="btn" @click="loginShow = true">登录</div>
        </div>

        <!-- 通知区域 -->
        <announce></announce>
        

        <!-- 商品列表区域 -->
        <gifts :isMobile="isMobile" :userInfo="userInfo" :products="products" @openLogin="openLogin"
          @submitLogin="submitLogin"></gifts>

      </div>

      <!-- 尾部信息 -->
      <bottomBar :isMobile="isMobile"></bottomBar>

      <!-- 登录界面 -->
      <popupBar :popshow.sync="loginShow" :isMobile="false">
        <div class="popup login" v-loading="loginLoading">
          <div class="popup-title-wrap">
            <i class="el-icon-close close" @click="loginShow = false"></i>
          </div>
          <div class="popup-content login">
            <div class="title">
              <img src="@/assets/images/bottom-logo-pc.png" alt="">
            </div>
            <div class="input-area">
              <div class="input-item" :class="{ active: inputActive }">
                <input type="text" placeholder="请输入aid" v-model="inputaid" @focus="inputActive = true"
                  @blur="inputActive = false">
                <span class="line"></span>
                <div class="vc-btn">
                  <button type="button" @click="aidShow = true">如何获取aid</button>
                </div>
              </div>
              <div class="login-btn">
                <button type="button" :disabled="!inputaid" :class="{ active: inputaid }"
                  @click="submitLogin(undefined)">登录</button>
              </div>
            </div>
          </div>
        </div>
      </popupBar>

      <popupBar :popshow.sync="aidShow" :isMobile="false">
        <!-- 如何查找AID  -->
        <div class="popup aid">
          <div class="popup-title-wrap">
            如何查找AID
            <i class="el-icon-close close" @click="aidShow = false"></i>
          </div>
          <div class="popup-content aid">
            <p class="p">1.主界面点击左上角头像</p>
            <img src="@/assets/images/whatUid/what-1.png" alt="">
            <p class="p">2.点击个人信息界面的设置按钮</p>
            <img src="@/assets/images/whatUid/what-2.png" alt="">
            <p class="p">3.点击更多设置</p>
            <img src="@/assets/images/whatUid/what-3.png" alt="">
            <p class="p">4.界面右下角点击复制AID</p>
            <img src="@/assets/images/whatUid/what-4.png" alt="">
            <p class="p">5.复制成功返回网页粘贴登录</p>
            <img src="@/assets/images/whatUid/what-5.png" alt="">
          </div>
        </div>
      </popupBar>

    </div>
  </div>
</template>
<script>
import topBar from '@/views/store/components/topBar.vue'
import gifts from '@/views/store/components/gifts.vue'
import bottomBar from '@/views/store/components/bottomBar.vue'
import popupBar from '@/views/store/components/popupBar.vue'
import announce from '@/views/store/components/announce.vue'
import { login } from '@/service/interfaceApi.js'
import products from '@/assets/config/products.js'
export default {
  name: 'store',
  components: {
    topBar,
    gifts,
    bottomBar,
    popupBar,
    announce
  },
  data() {
    return {
      products,
      isMobile: false,
      loginShow: false,
      aidShow: false,
      isLogin: false,
      inputaid: '', // '018d1faf-e6d1-270e-ec5c-4bd138071109'
      userInfo: {},
      loginLoading: false,
      inputActive: false
    }
  },
  created() {
    this.isMobile = this.isMobileDevice()
    // this.checkLogin()
    let val = localStorage.getItem('aidUserInfo');//获取存储的元素
    if (val) {
      let user = JSON.parse(val)
      this.isLogin = true
      this.userInfo = user;
      this.submitLogin(user.aid)

    } else {
      this.formatDiscount(9.8)
    }
  },
  methods: {
    isMobileDevice() {
      return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
    },
    openLogin() {
      this.loginShow = true
    },

    async submitLogin(aid) {
      this.loginLoading = true
      const response = await login({ aid: aid ? aid : this.inputaid })
      let res = response.data
      this.loginLoading = false
      if (res.code == 200) {
        // 将请求到的用户信息 赋值到userinfo
        this.userInfo = { ...res.data }
        // 请求成功将 this.isLogin 设置成true 展示商品信息
        this.isLogin = true
        // 保存用户信息到localstorage
        this.saveUserInfo(res.data)
        this.loginShow = false

        // 用户每月第一单9.8折 
        if (res.data.monthFirst) {
          this.formatDiscount(Number(res.data.firstRate) * 10)
        }

      } else {
        alert(res.message)
        this.loginOut()
      }
    },
    // 赋值 折扣
    formatDiscount(num) {
      this.products = this.products.map(item => {
        item.discount = num
        return item
      })
    },
    loginOut() {
      localStorage.removeItem('aidUserInfo')
      this.isLogin = false
      this.userInfo = {}
    },
    saveUserInfo() {
      localStorage.setItem('aidUserInfo', JSON.stringify(this.userInfo))
    },
  }
}
</script>
<style lang="scss">
.lauout-container {
  overflow-y: auto;
  height: 100vh;
  background-color: #f4f4f4;

  .page-container {
    margin-top: 80px;
    min-height: calc(100vh - 350px);

    .hx-banner {
      width: 100%;
      height: 0;
      padding-bottom: 15.625%;
      position: relative;
      cursor: pointer;
      overflow: hidden;
      background-color: #f3f3f3;

      .banner-img {
        width: 100%;
        border-style: none;
      }
    }

    .main-container {
      max-width: 1200px;
      margin: 0 auto;

      .game-info-wrap {
        display: flex;
        align-items: flex-end;
        margin: -25px 15px 0;

        .game-info {
          display: flex;
          align-items: center;
          flex: 1 1;
          -webkit-margin-end: 10px;
          margin-inline-end: 10px;

          .avatar {
            position: relative;
            width: 80px;
            height: 80px;
            border-radius: 20px;
            object-fit: cover;
            -webkit-margin-end: 10px;
            margin-inline-end: 10px;
          }

          .right {
            flex: 1 1;
            margin-top: 25px;

            .name {
              font-size: 17px;
              font-weight: 500;
              color: #333;
              line-height: 25px;
              display: flex;
              align-items: center;
            }

            .info {
              font-size: 12px;
              font-weight: 400;
              color: #999;
              line-height: 17px;
            }
          }
        }
      }

      .empty-login {
        margin-top: 20px;
        width: 100%;
        height: 135px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, .1);
        border-radius: 10px;
        background-color: #fff;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        font-weight: 500;
        color: #333;

        .btn {
          font-family: PingFangSC-Medium;
          box-sizing: border-box;
          height: 50px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 25px;
          user-select: none;
          cursor: pointer;
          font-size: 18px;
          font-weight: 500;
          color: #fff;
          padding: 0 10px;
          text-align: center;
          opacity: .9999;
          background: linear-gradient(115deg, #e22c2c 0%, #d32f2f 100%);
          margin-top: 18px;
          width: 220px;

          &:hover {
            opacity: .9;
          }

          &:active {
            opacity: 1;
            outline: 0;
          }
        }
      }

      .role-info-wrap {
        margin-top: 20px;
        display: flex;
        align-items: center;

        .role {
          position: relative;
          padding: 10px 12px;
          background-color: #fff;
          display: flex;
          align-items: center;
          font-size: 14px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: bolder;
          color: #333;
          line-height: 20px;
          flex-grow: 0;
          flex-shrink: 1;
          width: calc((100% - 20px) / 3);
          // flex-basis: calc((100% - 20px) / 3);
          margin-top: 10px;
          box-shadow: 0 2px 10px rgba(0, 0, 0, .1);
          border-radius: 20px;
          cursor: pointer;
          flex-direction: column;
          padding-left: 40px;

          .name {
            width: 100%;
            font-size: 14px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: bolder;
            color: #333;
            line-height: 20px;
          }

          .aid,
          .sid {
            width: 100%;
            color: #999;
            font-size: 12px;

          }

          .icon {
            position: absolute;
            bottom: 0px;
            right: 0px;
            z-index: 9;
          }

          &::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 2px solid transparent;
            border-radius: 10px;
            box-sizing: border-box;
            border: 2px solid #d32f2f;
          }
        }
      }
    }
  }
}

.popup.login {
  width: 450px;

  .popup-content.login {
    width: calc(100% - 80px);
    height: 415px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin: 0 auto;

    >.title {
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-bottom: 29px;

      >img {
        width: 167px;
        height: 50px;
        margin-bottom: 50px;
      }
    }

    >.input-area {
      width: 100%;
      height: 249px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding-bottom: 30px;

      .input-item {
        position: relative;
        height: 40px;
        font-size: 12px;
        font-weight: 400;
        color: #000;
        line-height: 12px;
        display: flex;
        align-items: center;
        transition: all .3s;
        border-bottom: 1px solid #f0f0f0;

        &.active {
          border-bottom: 1px solid #d30000;
        }

        >input {
          flex: 1;
          // width: 100%;
          height: 100%;
          outline: none;
          border: 0;
          border-radius: 0;
          // border-bottom: 1px solid #f0f0f0;

          // &:focus {
          //   border-bottom: 1px solid #d30000;
          //   transition: all .3s;
          // }

          &::placeholder {
            color: #bbb;
          }
        }

        .line {
          display: block;
          width: 1px;
          height: 14px;
          margin: 0;
          background-color: #f0f0f0;
          margin: 0 10px;
        }

        .vc-btn>button {
          color: #d30000;
          border: none;
          font-size: 12px;
          font-weight: 400;
          line-height: 12px;
          background: none;
          cursor: pointer;
          line-height: 14px;
        }

      }

      .login-btn {
        width: 100%;

        button {
          width: 100%;
          height: 50px;
          border-radius: 25px;
          background: #c5c5c5;
          box-shadow: 0 6px 7px rgba(197, 198, 199, .25);
          color: #fff;
          border: none;
          font-size: 14px;
          line-height: 20px;
          font-weight: 500;
          cursor: not-allowed;

          &.active {
            background-color: #d30000;
            box-shadow: 0 6px 7px 0 rgba(211, 0, 0, .25);
            cursor: pointer;
          }
        }
      }
    }


  }
}

.popup.aid {
  width: 600px;

  .popup-content.aid {
    padding: 20px 90px;
    overflow: auto;
    max-height: 60vh;
    text-align: left;

    >img {
      display: block;
      width: 100%;
    }

    .p {
      margin: 18px 0;
    }
  }
}

.mobile-body {
  .popup.aid {
    width: calc(100vw - 30px);

    .popup-content.aid {
      width: 100%;
      padding: 20px 10px;
    }
  }

  .popup.login {
    width: calc(100vw - 30px);
    border-radius: 10px;

    .popup-title-wrap {
      border-radius: 10px;
    }
  }
}


.mobile-body.lauout-container {
  .page-container {
    margin-top: 70px;

    .hx-banner {
      height: 0;
      padding-bottom: 26.7%;
    }

    .main-container {
      max-width: 100%;

      .empty-login {
        border-radius: 0;
      }

      .announce {
        border-radius: 0;
      }

      .role-info-wrap {
        .role {
          width: 100%;
        }
      }
    }
  }

}
</style>